<template>
  <div class="home">
    <el-col :span="24" class="admin-header">
      <h2 class="back-title">后台管理系统</h2>
    </el-col>
    <el-row>
      <el-col class="m-col" :span="4">
        <el-menu @select="handleSelect" style="height:550px">
          <el-menu-item index="1">
            <span slot="title">用户管理</span>
          </el-menu-item>
          <el-menu-item index="2">
            <span slot="title">视频管理</span>
          </el-menu-item>
          <el-menu-item index="3">
            <span slot="title">通知管理</span>
          </el-menu-item>
          <el-menu-item index="4">
            <span slot="title">轮播图管理</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="19">
        <router-view></router-view>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import storageService from "@/utils/storageService";
export default {
  data() {
    return {};
  },
  methods: {
    handleSelect(key) {
      switch (key) {
        case "1":
          this.$router.push({ name: "user" });
          break;
        case "2":
          this.$router.push({ name: "adminVideo" });
          break;
        case "3":
          this.$router.push({ name: "announce" });
          break;
        case "4":
          this.$router.push({ name: "carousel" });
          break;
      }
    },
  },
  created() {
    if (!storageService.get(storageService.ADMIN_TOKEN)) {
      this.$router.push({ name: "adminLogin" });
    }
  },
};
</script>

<style>
.home {
  width: 90%;
  min-width: 1400px;
  margin: auto;
}
.admin-header {
  background-color: #2faee3;
  height: 70px;
}

.back-title {
  color: #fff;
  margin: 15px 20px;
}
</style>
